<template>
  <!-- 封装音乐列表组件 -->
  <el-table
    :data="list"
    style="width:100%"
    size="medium"
    class="music-list"
    @row-dblclick="playMusic"
    stripe
  >
    <el-table-column type="index" width="50" label="#">
      <template v-slot="scope">
          <span class="active-color" v-if="showCurren(scope.row.id)">
            <i v-if="isPlay" class="iconfont icon-shengyin_shiti"></i>
            <i v-else class="iconfont icon-sound"></i>
          </span>
          <span v-else style="color:#c3c3db">{{scope.$index + 1}}</span>
      </template>
    </el-table-column>
    <el-table-column width="50">
      <template v-slot="{row}">
        <div class="pointer" @click="likeMusic(row.id)">
          <i v-if="!isLiked(row.id)" class="el-icon-star-off"></i>
          <i v-else style="color:red" class="el-icon-star-on"></i>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="音乐标题" show-overflow-tooltip >
      <template v-slot="scope">
        <span style="cursor: pointer">{{scope.row.name}}</span>
        <span v-if="scope.row.mv !== 0" class="mv">MV <i class="el-icon-caret-right"></i></span>
      </template>
    </el-table-column>
    <el-table-column prop="ar[0].name" label="歌手">
      <template v-slot="scope">
        <span class="pointer" @click="toArtistDetail(scope.row);">{{scope.row.ar[0].name}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="al.name" label="专辑名" style="cursor: pointer">
      <template v-slot="scope">
        <span class="pointer" @click="toAlbumDetail(scope.row)">{{scope.row.al.name}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="dt" label="时长" width="180">
      <template v-slot="scope">
      {{(scope.row.dt / 1000) | timeFormat}}</template>
    </el-table-column>
    
  </el-table>
</template>

<script>
import { likeMusic } from "@/api/request";
import { mapState } from 'vuex'
export default {
props:['list'],
computed:{
  ...mapState([
    'isLogin',
    'likeIdList',
    'isPlay',
    'currenMusicId',
    'musicList'
  ])
},
methods:{
    //播放音乐
    playMusic(row){
      console.log('列表没变', this.list == this.musicList);
      this.$store.dispatch('playMusic',{
        list:this.list,
        id : row.id
      })
    },
    //播放全部
    playMusicAll(){
      if(this.list.length == 0) return;
      let id = this.list[0].id;
      console.log('列表没变', this.list == this.musicList)
      this.$store.dispatch('playMusic',{
        list:this.list,
        id 
      })
    },
    showCurren(id){
      return this.currenMusicId === id
    },
    toArtistDetail(row){
      this.$router.push("/artistdetail/" + row.ar[0].id);
    },
    toAlbumDetail(row){
      this.$router.push("/albumdetail/" + row.al.id);
    },
    isLiked(id){
      return this.likeIdList.indexOf(id) !== -1;
    },
    async likeMusic(id){
      if(!this.isLogin) return this.$message.error('请先登录');
      if(typeof id !== 'number') return
      let liked = this.isLiked(id);
      const {data:res} = await likeMusic(id , !liked);
      if(res.code !== 200) return ;
      this.$message.success(`${ liked  ? '取消喜欢' : '喜欢'} 成功`);
      if(liked){
        this.$store.commit('setLikeIdList',{
          type : 'reomve',
          data : id 
        })
      } else {
        this.$store.commit('setLikeIdList',{
          type : 'unshift',
          data : id 
        })
      }

      
    }
  }
}
</script>

<style lang="less" scoped>
.mv{
  color: #ec4949;
  border: #ec4949 solid 1px;
  margin-left: 6px;
  cursor: pointer;
}
.active-color {
  color: #ec4141;
}
</style>